<template>
	<view class="product-detail-container">
		<!-- 顶部导航栏 -->
		<!-- <view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="32" color="#333"></u-icon>
			</view>
			<text class="header-title">商品详情</text>
			<view class="header-right">
				<text class="icon">⋯</text>
				<view class="target-icon">⊙</view>
			</view>
		</view> -->

		<!-- 商品图片 -->
		<view class="product-image-section">
			<u--image 
				:src="productInfo.image" 
				width="100%" 
				height="400rpx"
				:showLoading="true"
				mode="aspectFit">
			</u--image>
		</view>

		<!-- 商品基本信息 -->
		<view class="product-info-section">
			<view class="product-main-info">
				<view class="product-title-row">
					<text class="product-name">{{ productInfo.name }}</text>
					<view class="action-buttons">
						<view class="store-btn" @click="goToStore">
							<text class="store-text">进店</text>
						</view>
						<view class="favorite-btn" @click="toggleFavorite">
							<u-icon 
								:name="isFavorite ? 'heart-fill' : 'heart'" 
								:color="isFavorite ? '#ff4757' : '#ccc'" 
								size="28">
							</u-icon>
							<text class="favorite-text">收藏</text>
						</view>
					</view>
				</view>
				<text class="product-price">¥{{ productInfo.price }}</text>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="product-detail-section">
			<text class="section-title">商品详情</text>
			<view class="detail-content">
				<text class="detail-text" v-if="productInfo.description">
					{{ productInfo.description }}
				</text>
				<text class="detail-placeholder" v-else>暂无详细信息</text>
			</view>
		</view>

		<!-- 邀请好友横幅 -->
		<view class="invite-banner">
			<view class="invite-content">
				<view class="invite-text-area">
					<text class="invite-title">邀请好友得奖励</text>
					<text class="invite-subtitle">千万现金送不停</text>
					<view class="invite-btn" @click="inviteFriends">
						<text class="invite-btn-text">马上邀请好友</text>
					</view>
				</view>
				<view class="invite-decoration">
					<!-- 装饰性图标 -->
					<view class="gift-box gift-1"></view>
					<view class="gift-box gift-2"></view>
					<view class="gift-box gift-3"></view>
				</view>
			</view>
		</view>

		<!-- 配送信息 -->
		<view class="delivery-info">
			<text class="delivery-text">超出配送范围</text>
		</view>

		<!-- 底部购物车栏 -->
		<view class="bottom-cart-bar">
			<view class="cart-info">
				<view class="cart-icon-container">
					<u-icon name="shopping-cart" size="32" color="#fff"></u-icon>
					<view class="cart-count" v-if="cartCount > 0">
						<text class="count-text">{{ cartCount }}</text>
					</view>
				</view>
				<text class="cart-price">¥{{ totalPrice }}</text>
			</view>
			<view class="checkout-btn" @click="goToCheckout">
				<text class="checkout-text">去结算</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productInfo: {
					id: 1,
					name: '打印（可免费送到家）',
					price: '0.01',
					image: '/static/recommendGood/2.png',
					description: null // 根据图片显示null
				},
				isFavorite: false,
				cartCount: 1,
				totalPrice: '0.01'
			}
		},
		onLoad(options) {
			// 获取商品ID
			if (options.id) {
				this.loadProductDetail(options.id);
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 加载商品详情
			async loadProductDetail(productId) {
				try {
					// 模拟API调用
					// const response = await this.$http.get(`/api/products/${productId}`);
					// this.productInfo = response.data;
					console.log('加载商品详情:', productId);
				} catch (error) {
					console.error('加载商品详情失败:', error);
				}
			},
			
			// 进入店铺
			goToStore() {
				uni.navigateTo({
					url: '/pages/menu/menu?storeId=' + this.productInfo.storeId
				});
			},
			
			// 切换收藏状态
			toggleFavorite() {
				this.isFavorite = !this.isFavorite;
				uni.showToast({
					title: this.isFavorite ? '已收藏' : '已取消收藏',
					icon: 'success',
					duration: 1500
				});
			},
			
			// 邀请好友
			inviteFriends() {
				uni.navigateTo({
					url: '/pages/inviteFriends/inviteFriends'
				});
			},
			
			// 去结算
			goToCheckout() {
				if (this.cartCount === 0) {
					uni.showToast({
						title: '请先添加商品到购物车',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: '/pages/ConfirmOrder/ConfirmOrder'
				});
			},
			
			// 添加到购物车
			addToCart() {
				this.cartCount++;
				this.updateTotalPrice();
				
				uni.showToast({
					title: '已添加到购物车',
					icon: 'success'
				});
			},
			
			// 更新总价
			updateTotalPrice() {
				const price = parseFloat(this.productInfo.price);
				this.totalPrice = (price * this.cartCount).toFixed(2);
			}
		}
	}
</script>

<style scoped>
	.product-detail-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.header-left {
		width: 60rpx;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.icon {
		font-size: 28rpx;
		color: #666;
	}

	.target-icon {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 3rpx solid #333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333;
	}

	/* 商品图片 */
	.product-image-section {
		background-color: #fff;
		padding: 30rpx;
	}

	/* 商品信息 */
	.product-info-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.product-title-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.product-name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		flex: 1;
		margin-right: 20rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	.store-btn {
		background-color: #1976d2;
		padding: 20rpx 24rpx;
		border-radius: 8rpx;
	}

	.store-text {
		color: #fff;
		font-size: 24rpx;
	}

	.favorite-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.favorite-text {
		font-size: 20rpx;
		color: #666;
	}

	.product-price {
		font-size: 48rpx;
		color: #ff4757;
		font-weight: bold;
	}

	/* 商品详情 */
	.product-detail-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.detail-content {
		min-height: 100rpx;
	}

	.detail-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	.detail-placeholder {
		font-size: 26rpx;
		color: #999;
		font-style: italic;
	}

	/* 邀请好友横幅 */
	.invite-banner {
		margin: 20rpx 30rpx;
		background: linear-gradient(135deg, #ff4757, #ff8a3d);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.invite-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		position: relative;
	}

	.invite-text-area {
		flex: 1;
	}

	.invite-title {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.invite-subtitle {
		font-size: 24rpx;
		color: #fff;
		display: block;
		margin-bottom: 30rpx;
	}

	.invite-btn {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		padding: 16rpx 32rpx;
		display: inline-block;
	}

	.invite-btn-text {
		color: #fff;
		font-size: 24rpx;
	}

	.invite-decoration {
		position: relative;
		width: 120rpx;
		height: 120rpx;
	}

	.gift-box {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
	}

	.gift-1 {
		background-color: #4285f4;
		top: 0;
		right: 0;
		transform: rotate(15deg);
	}

	.gift-2 {
		background-color: #34a853;
		bottom: 20rpx;
		left: 0;
		transform: rotate(-15deg);
	}

	.gift-3 {
		background-color: #fbbc04;
		bottom: 0;
		right: 20rpx;
		transform: rotate(25deg);
	}

	/* 配送信息 */
	.delivery-info {
		text-align: center;
		padding: 30rpx;
	}

	.delivery-text {
		font-size: 26rpx;
		color: #999;
	}

	/* 底部购物车栏 */
	.bottom-cart-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.cart-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.cart-icon-container {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		background-color: #1976d2;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cart-count {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff4757;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.count-text {
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
	}

	.cart-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.checkout-btn {
		background-color: #4285f4;
		padding: 25rpx 50rpx;
		border-radius: 50rpx;
	}

	.checkout-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>